<template>
  <div class="activity">
    <div class="activity-header">
      <el-button
          text
          class="left"
      >
        素养活动
      </el-button>
      <el-button
          :type = 'type1'
          text
          link
          class="right"
          @click="enter"
      >
        查看更多
      </el-button>
    </div>
    <div class="activity-body">
      <el-table
          :data="tabledata"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%"
          :row-style="{height: '40px' }"
      >
        <el-table-column prop="coverImageUrl" label="活动封面" min-width="9.7" />
        <el-table-column prop="title" label="活动名称" min-width="19" />
        <el-table-column prop="signupStart" label="活动时间" min-width="19" sortable />
        <el-table-column prop="activityCategoryName" label="活动类型" min-width="19" />
        <el-table-column prop="activityStart" label="报名时间" min-width="19" sortable />
        <el-table-column prop="time" label="状态" min-width="8"/>
      </el-table>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {homeListApi,homeListPro } from '../../api/index'
import { ref,onMounted } from 'vue';
import {getInfo} from "../../api/login";
import { useRouter } from 'vue-router';
const router = useRouter()
const type1 = 'primary'
const tabledata = ref([]);
const usera = ref([]);
onMounted(()=>{
  // home()
  // getInfoFn()
})
const getInfoFn = async () => {
  let {user} = await getInfo()
  localStorage.setItem('userInfo', JSON.stringify(user));
  usera.value = user
}
const home  = async () => { // 函解构用async和await包裹
  const {rows,code} = await homeListApi()
  // 对data进行解构赋值 取出请求的结果res
  if(code==200){
    tabledata.value = rows
  }else{
    console.log(code)
  }// 控制台打印结果 => 请求成功 code为200
}
function enter(){
  // router.push({path:'/information/inform'})
  if(usera.value.userId === 1){
    router.push({path:'/activity/activityLists'})
  }else {
    router.push({path:'/activity/activityList'})
  }
}
</script>
<style>
.activity{
  width: 100%;
  padding: 20px;
  margin-top: 30px;
}
.activity-header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 20px;
}
.activity-body{
  width: 100%;
}
.left{
  float: left;
}
.right{
  float: right;
}


</style>